<template>
  <a-modal :width="'45vw'" title="应用门店" popup-container=".page-container" @cancel="close" :visible="visible" unmount-on-close>
    <div class="site-sum">门店数量：{{ siteList?.length || '-' }}</div>
    <div class="site-list">
      <a-space :size="10" wrap>
        <a-tag v-for="(item, index) in siteList" :key="index">{{ item.siteName }}</a-tag>
      </a-space>
    </div>
    <template #footer>
      <a-button @click="close">关闭</a-button>
    </template>
  </a-modal>
</template>

<script setup name="CommonPriceTemplateSiteModal">
  import { ref } from 'vue'

  const visible = ref(false)
  const siteList = ref([])
  const open = (record, api) => {
    visible.value = true
    // 获取模板门店列表
    const param = {
      contractId: record.id,
      isSysTemplate: record.isSysTemplate,
    }
    api(param).then((res) => {
      const result = res.result
      siteList.value = result
    })
  }
  const close = () => {
    visible.value = false
    siteList.value = []
  }
  defineExpose({
    open,
  })
</script>

<style lang="less" scoped>
  .site-sum {
    margin-bottom: 10px;
    font-size: 16px;
  }
  .site-list {
    max-height: 70vh;
    overflow: auto;
  }
</style>
